<template>
  <div class="nav-home">
  	<div class="box">
  		<div class="head-box">
		  	<div class="title" @click="gotoTest">
		      {{homeDepaName}}
		    </div>
		    <div class="input-search">
          <div class="input-map" @click="gotoMap">医院地图</div>
		      <div class="input-box" @click="gotoSearch('')"><span><van-icon name="search" size="14px" class="icon"/></span><span>请输入目的地、起点</span></div>
		    </div>
	    </div>
	    <div class="nav-box">
		    <div class="nav">
		      <sliderNav :homeDepaid=homeDepaid :homeMapid=homeMapid :homeMapname=homeMapname :apiUrl=apiUrl></sliderNav>
		    </div>
	    </div>
	    <div class="floor">
	    	<van-collapse v-model="activeNames">
          <div class="floor-item">

						<van-collapse-item title="楼栋展示" name="0">
              <div slot="icon" class="floor-icon-warp"><span class="floor-icon"></span></div>
              <div class="floor-list">
                <ul><li v-for="(it,index) in homeList.building" :key="index" @click="gotoInputSearch(it)">{{it.mapname}}</li></ul> 
              </div>
            </van-collapse-item>
    
            <van-collapse-item title="出入口" name="1">
              <div slot="icon" class="floor-icon-warp"><span class="floor-icon"></span></div>
              <div class="floor-list">
                <ul><li v-for="(it,index) in exitList.entry"  :key="index" @click="gotoMapPoint(it)">{{it.name}}</li></ul> 
              </div>
            </van-collapse-item>

		      </div>
	      </van-collapse>
	    </div>
	  </div>
  </div>
</template>

<script>
import API from "./api";
import i18n from "./locale";
import sliderNav from "./nav-home-slider-nav";
import * as tools from "@/libs/tools";

//const apiUrl = "https://www.1hqn.com";

const apiUrl = "http://hqn.fun:16812/";

export default {
  name: "nav-home",
  components: {
    sliderNav
  },
  data() {
    return {
      isWx: false,
      i18n: i18n,
      openid: "",
      apiUrl: apiUrl,
      homeDepaid: "",
      homeDepaName: "",
      homeMapid: "10003",
      homeMapname: "总平图",
      shareInfo: "",
      homeList: [],
      exitList: [],
      activeNames: []
    };
  },

  created() {
    //alert(tools.queryString("shareInfo"));
    //console.log(70,tools.queryString("shareInfo"));
    this.openid = tools.queryString("openid")
      ? tools.queryString("openid")
      : "123456";
    this.homeDepaid = tools.queryString("depaid")
      ? tools.queryString("depaid")
      : "100001";
    this.homeDepaName = tools.queryString("name")
      ? decodeURIComponent(tools.queryString("name"))
      : "医院项目演示";
    this.shareInfo = tools.queryString("shareInfo")
      ? decodeURIComponent(tools.queryString("shareInfo"))
      : "";
  },

  mounted() {
    this.getBuildList(this.homeDepaid);
    this.initCheckEnvWx();
    //console.log(window.location);
  },
  methods: {
    initCheckEnvWx() {
      let tthis = this;
      if (wx) {
        wx.miniProgram.getEnv(function(res) {
          console.log("wx", res.miniprogram);
          tthis.isWx = res.miniprogram;
        });
      }
    },

    gotoSearch(keyword) {
      var mapObj = {
        depaid: this.homeDepaid,
        name: this.homeDepaName,
        mapid: this.homeMapid,
        mapname: this.homeMapname,
        keyword: keyword,
        type: "search"
      };
      window.location.href =
        apiUrl +
        "/Router/Route3?openid=" +
        this.openid +
        "&depaid=" +
        mapObj.depaid +
        "&mapid=" +
        mapObj.mapid +
        "&mapInfo=" +
        encodeURIComponent(JSON.stringify(mapObj));
    },

    getExitList(depaid) {
      API.getBuildList({ depaid: depaid, crk: 1 })
        .then(res => {
          if (res.code == 200) {
            let data = res.data;
            this.exitList = data;
            this.activeNames = ["0", "1", "2"];
          }
        })
        .catch(err => {
          this.$notify("请求异常！");
        });
    },

    getBuildList(depaid) {
      API.getBuildList({ depaid: depaid, crk: 0 })
        .then(res => {
          if (res.code == 200) {
            let data = res.data;
            this.getFilters(data.building);
            this.homeList = data;
            this.getExitList(this.homeDepaid);
          }
        })
        .catch(err => {
          this.$notify("请求异常！");
        });
    },

    getFilters(data) {
      for (var i in data) {
        if (data[i].mapname.indexOf("平面") > -1) {
          this.homeMapid = data[i].mapid;
          this.homeMapname = data[i].mapname;
          data.splice(i, 1);
        }
      }
      return data;
    },

    gotoInputSearch(obj) {
      var mapObj = {
        depaid: obj.depaid,
        name: this.homeDepaName,
        mapid: obj.mapid,
        mapname: obj.mapname,
        type: "default"
      };
      window.location.href =
        apiUrl +
        "Router/Route3?openid=" +
        this.openid +
        "&depaid=" +
        obj.depaid +
        "&mapid=" +
        obj.mapid +
        "&mapInfo=" +
        encodeURIComponent(JSON.stringify(mapObj));
    },

    gotoMapPoint(obj) {
      var mapObj = {
        depaid: obj.depaid,
        name: this.homeDepaName,
        mapid: obj.mapid,
        mapname: obj.mapname,
        point: obj,
        type: "point"
      };
      window.location.href =
        apiUrl +
        "Router/Route3?openid=" +
        this.openid +
        "&depaid=" +
        obj.depaid +
        "&mapid=" +
        obj.mapid +
        "&mapInfo=" +
        encodeURIComponent(JSON.stringify(mapObj));
    },

    gotoMap() {
      var mapObj = {
        depaid: this.homeDepaid,
        name: this.homeDepaName,
        mapid: this.homeMapid,
        mapname: this.homeMapname,
        type: "default"
      };
      window.location.href =
        apiUrl +
        "Router/Route3?openid=" +
        this.openid +
        "&depaid=" +
        mapObj.depaid +
        "&mapid=" +
        mapObj.mapid +
        "&mapInfo=" +
        encodeURIComponent(JSON.stringify(mapObj));
    },

    gotoTest() {
      window.location.href = "/test.html";
    }
  }
};
</script>
<style lang="less">
.nav-home {
  .van-cell {
    padding: 5px 15px;
  }

  .van-hairline--top-bottom::after {
    border-width: 0;
  }

  .van-hairline--top::after {
    border-top-width: 0px;
  }

  background: #f8f8fa;
  height: 100%;

  input::-webkit-input-placeholder {
    color: #aab2bd;
    font-size: 12px;
  }

  .head-box {
    box-sizing: border-box;
    background: #7658d2;
    height: 200px;
    padding: 10px 16px;
  }

  .title {
    font-size: 18px;
    color: #fff;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-weight: 600;
  }

  .input-search {
    margin-top: 30px;
    text-align: center;
    .input-map {
      display: inline-block;
      border: 1px solid transparent;
      border-radius: 30px;
      width: 29%;
      margin-right: 10px;
      font-size: 14px;
      font-weight: 600;
      background: #9b7aff;
      line-height: 28px;
      color: #fff;
    }
    .input-box {
      display: inline-block;
      border: 1px solid transparent;
      border-radius: 30px;
      width: 65%;
      height: 28px;
      background: #fff;
      color: #aab2bd;
      font-size: 12px;
      line-height: 28px;
      cursor: pointer;
      span {
        display: inline-block;
        position: relative;
      }
      .icon {
        position: absolute;
        top: -11px;
        left: -20px;
      }
    }
  }

  .nav-box {
    box-sizing: border-box;
    position: absolute;
    top: 140px;
    width: 100%;
    padding: 0 16px;
    .nav {
      background: #fff;
      border: 1px solid transparent;
      border-radius: 5px;
      height: 160px;
      box-sizing: border-box;
      padding: 0px 0px;
    }
    table {
      width: 100%;
      height: 85%;
      font-size: 12px;
      text-align: center;
      td {
        width: 25%;
        text-align: center;
        .icon-div {
          width: 30px;
          height: 32px;
          margin: auto;
          background-position: center;
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }

  .floor {
    min-height: 200px;
    margin-top: 110px;
    padding: 6px 16px;
    .floor-item {
      margin-top: 10px;
      background: #fff;
      border: 1px solid transparent;
      border-radius: 5px;
      min-height: 400px;
    }
    .floor-icon-warp {
      position: relative;
      width: 20px;
    }
    .floor-icon {
      margin: 0 10px 0 5px;
      border: 1px solid transparent;
      border-radius: 2px;
      height: 14px;
      line-height: 14px;
      width: 2px;
      display: inline-block;
      background-image: url("./assets/images/floor-icon.png");
      background-position: center;
      position: absolute;
      top: 3px;
    }
  }

  .floor-list {
    min-height: 50px;
    font-size: 13px;
    display: inline;
    height: auto;
    word-break: break-all;
    word-wrap: break-word;
    ul {
      overflow: hidden;
    }

    li {
      float: left;
      margin: 5px 10px;
      border: 1px solid #ccc;
      color: #666;
      padding: 0 10px;
      border-radius: 30px;
      line-height: 20px;
      height: 20px;
    }
  }
}
</style>
